<template>
  <div class="register">
    <div class="img"></div>
    <div class="title">微信号 / QQ / 邮箱登录</div>
    <div class="item">
      <div class="item1">
        <div class="t">账号</div>
        <input
          type="text"
          placeholder="请填写微信号/QQ/邮箱登录"
          v-model="user.username"
        />
      </div>
      <div class="item2">
        <div class="t">密码</div>
        <input
          type="password"
          placeholder="请填写密码"
          v-model="user.password"
        />
      </div>
      <div
        class="r"
        @click="$router.push({ path: '/user/register' })"
      >
        前往注册
      </div>
      <div
        class="btn"
        :class="{ disable: isDisable }"
        @click="submit"
      >
        登录
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data: function () {
    return {
      user: {
        username: "user1",
        password: "1",
      },
    }
  },
  computed: {
    isDisable() {
      return !this.user.password || !this.user.username
    },
  },
  methods: {
    async submit() {
      this.$toast.loading("登录中")
      const user = await this.$axios.post("/user/login", {
        user: this.user,
      })
      if (user) {
        this.$toast.success("登录成功", { duration: 200 })
        this.$global.setUserInfo(user)
        this.$router.push({ path: "/app" })
      } else {
        this.$toast.warn("登录失败")
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.register {
  background-color: #ededed;
  position: relative;
  font-family: "Arial Regular", "Arial";
}
.img {
  height: 15px;
  margin-top: 40px;
  margin-left: 15px;
}
.a {
  position: absolute;
  top: 40px;
  left: 15px;
}
.b {
  position: absolute;
  top: 40px;
  left: 15px;
}
.title {
  height: 28px;
  margin-top: 106px;
  margin-left: 18px;
  font-size: 24px;
  font-weight: bold;
  color: #333333;
}
.item {
  height: 51px;
  margin-top: 33px;
  margin-left: 14px;
  font-size: 15px;
  margin-bottom: 26px;
}
.t {
  box-sizing: border-box;
  padding-left: 4px;
  display: inline-block;
  font-weight: 700;
  width: 86px;
}
input {
  width: 258px;
  height: 50px;
  text-align: left;
  border-style: none;
  outline: none;
  background-color: #ededed;
}

input::placeholder {
  color: #999999;
}
.r {
  width: 90px;
  height: 17px;
  line-height: normal;
  font-size: 15px;
  color: #576b95;
  margin-bottom: 38px;
  margin-left: 4px;
}
.btn {
  width: 344px;
  height: 45px;
  border-radius: 5px;
  box-sizing: border-box;
  color: $white;
  background-color: $chat-green;

  text-align: center;
  line-height: 45px;

  transition: all 0.3s;
}

.btn.disable {
  color: #b2b2b2;
  background-color: #e1e1e1;
}
</style>
